<template>
  <div class="singerVideo" v-if="vList">
    <div class="singerVideoBox" v-for="(item,index) in vList" :key="item.id" @click="goVideoDetails(item,item.vid,index)">
      <div class="imgBox">
        <img :src="item.coverUrl" />
        <span>
          <i class="iconfont icon-bofangsanjiaoxing"></i>
          {{Math.floor((item.playTime)/10000)}}万
        </span>
      </div>
      <div class="contentBox">
        <div class="songName">
          <span class="icon" v-if="item.type==0">MV</span>
          <span class="name">{{item.title}}</span>
        </div>
        <div class="mvTime">
          <span class="time">{{mydate(item.durationms)}}</span>
          <span
            class="singerName"
            :class="{'active':item.creator[0].userName=='薛之谦'}"
          >{{item.creator[0].userName}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
export default {
  components: {},
  props: ["singerName"],
  data() {
    return {
      vList: ""
    };
  },
  watch: {
    singerName: function() {
      this.$http("/search", {
        params: {
          keywords: this.singerName,
          type: 1014
        }
      }).then(res => {
        console.log(res);
        this.vList = res.data.result.videos;
      });
    }
  },
  computed: {},
  methods: {
    mydate: util.time,
    goVideoDetails(item,id,index) {
      console.log(item,id,index);
      console.log(this.vList[index].type);
      if(this.vList[index].type==0){
        this.$router.push({
        name:"mvdetails",
        params:{
          id:id
        }
      })
      }
    }
  },
  created() {
    this.$http("/search", {
      params: {
        keywords: this.singerName,
        type: 1014
      }
    }).then(res => {
      console.log(res);
      this.vList = res.data.result.videos;
    });
  },
  mounted() {
    console.log(this.singervideoList);
  }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.singerVideo {
  padding: vw(10);
  .singerVideoBox {
    width: 100%;
    display: flex;
    align-items: center;
    padding-bottom: vw(10);
    .imgBox {
      width: vw(150);
      height: vw(85);
      border-radius: vw(6);
      overflow: hidden;
      position: relative;
      img {
        width: 100%;
      }
      span {
        position: absolute;
        top: vw(4);
        right: vw(4);
        color: #fff;
        font-size: vw(12);
        i {
          font-size: vw(12);
          color: #fff;
        }
      }
    }
    .contentBox {
      width: 58%;
      padding-left: vw(10);
      .songName {
        display: flex;
        align-items: center;
        .icon {
          display: inline-block;
          width: vw(26);
          height: vw(18);
          border: vw(1) solid red;
          border-radius: vw(4);
          font-size: vw(10);
          text-align: center;
          color: red;
          margin-right: vw(4);
        }
        .name {
          font-size: vw(16);
          // white-space: nowrap;
          // overflow: hidden;
          // text-overflow: ellipsis;
        }
      }
      .mvTime {
        display: flex;
        align-items: center;
        padding-top: vw(6);
        .time {
          font-size: vw(12);
          color: #777;
          margin-right: vw(4);
        }
        .singerName {
          font-size: vw(12);
          color: #777;
        }
        .active {
          color: #87ceeb;
        }
      }
    }
  }
}
</style>